Chakra UI 有刻好常用 UI 元件，像是 Button、Input 等。

這些元件跟設計稿上多少些許不一樣，但我們不需要從 0 開始打造，一樣用客製主題的方式去 overrdie component style，便於我們日後對元件持續維護。

我們需先了解 Chakra UI 元件的 style 組成和慣例
首先大部分的元件 style 是由 base or default style 加上 modifier styles 構成

常見的 modifier styles:

• Size 大小 (lg,md,sm)
• Variant 變體 (常見如 outline, solid)
• Color scheme 套用的色彩計畫
• Color mode 深淺色主題

當我們要 override 元件 style 時，要確認每個元件樣式 API
下表是基礎 single part components 的 API

export default {
  // Styles for the base style
  baseStyle: {},
  // Styles for the size variations
  sizes: {},
  // Styles for the visual style variations
  variants: {},
  // The default `size` or `variant` values
  defaultProps: {},
}

在我們製作自己的新元件(Chakra UI 沒有的) 也可以使用這個規則

const Card = {
  // The styles all Cards have in common
  baseStyle: {
    display: 'flex',
    flexDirection: 'column',
    background: 'white',
    alignItems: 'center',
    gap: 6,
  },
  // Two variants: rounded and smooth
  variants: {
    rounded: {
      padding: 8,
      borderRadius: 'xl',
      boxShadow: 'xl',
    },
    smooth: {
      padding: 6,
      borderRadius: 'base',
      boxShadow: 'md',
    },
  },
  // The default variant value
  defaultProps: {
    variant: 'smooth',
  },
}

const theme = extendTheme({
  components: {
    Card,
  },
})

我們在製作新的 React component 需利用 useStyleConfig 這個 hook 讓元件使用到我們所寫好的樣式

const styles = useStyleConfig(themeKey, props)
//themeKey: theme.components 中對應的 styleConfig 樣式名稱
//props: 當樣式有用到 size, variant, and colorScheme 可以填入進來用來計算元件的樣式組成

把 computed styles 傳到元件 __CSS

import { Flex, useStyleConfig } from '@chakra-ui/react'

const Card = () => {
    const { variant, ...rest } = props
    const styles = useStyleConfig('Card', { variant })

    return (
      // 把 computed styles 傳到 __css prop
      <Flex __css={styles} {...rest} />
    )
}